<template>
  <PageContainer>
    <view class="container">
      <Header title="已选列表">
        <view style="padding: 16rpx 32rpx">
          <UniSearchBar
            placeholder="请输入搜索内容"
            :radius="32"
            @confirm="searchFnc"
            @cancel="restFnc"
            @clear="restFnc"
          />
        </view>
      </Header>
      <Paglist v-model="dataList" :is-init-api="false" :parame="params" @register="register">
        <template v-for="(v, i) in dataList" :key="v.productLibId">
          <ProductItem type="selected" :item="v" @handle-click="delProduct(v.productLibId)" />
        </template>
      </Paglist>
      <TButtonGroup>
        <TButton class="gutter-btn" custom-class="borderBtn" text="添加产品" @click="toSelect" />
        <TButton class="gutter-btn" text="保存选择" :type="'primary'" @click="submit" />
      </TButtonGroup>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* selectedProductsList 已选列表 */
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import { navigateBack, navigateTo, onLoad } from '@/router';
  import ProductItem from '@/components/ProductItem/index.vue';
  import { provide, reactive, ref } from 'vue';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import UniSearchBar from '@/uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import type { SelectedProductsList } from '@/router/types/modules';
  import type { ProductListResult } from '@/api/card/types';
  import { getBusinessCardProductList } from '@/api/card';

  const params = reactive({
    keyword: '',
    current: 1,
    size: 10,
    productLibIds: [] as number[],
    memberLeadingId: 0,
  });

  const success = ref<SelectedProductsList['success']>();
  onLoad<'selectedProductsList'>((op) => {
    params.productLibIds = op.selectedIds;
    params.memberLeadingId = op.memberLeadingId as number;
    success.value = op.success;
    refresh();
  });

  provide('api', getBusinessCardProductList);

  const [register, { refresh }] = useConList();

  const dataList = ref<ProductListResult[]>([]);

  function searchFnc(e: { value: string }) {
    params.keyword = e.value;
    refresh();
  }

  function restFnc() {
    params.keyword = '';
    refresh();
  }

  function delProduct(id: number) {
    params.productLibIds = params.productLibIds.filter((v) => v !== id);
    dataList.value = dataList.value.filter((v) => v.productLibId !== id);
    if (dataList.value.length === 0) refresh();
  }

  function toSelect() {
    navigateTo({
      name: 'chooseProducts',
      options: {
        selectedIds: params.productLibIds,
        memberLeadingId: params.memberLeadingId,
        success: (ids) => {
          params.productLibIds = ids;
          refresh();
        },
      },
    });
  }

  function submit() {
    success.value?.(params.productLibIds);
    navigateBack();
  }
</script>

<style lang="scss" scoped>
  .container {
    background-color: #fff;
    min-height: 100vh;
  }
</style>
